<template>

   <el-header>
     <div>实验成果管理系统</div>
     <div>
       <span style="line-height: 40px;">欢迎{{user.username}}回来</span>
       <el-dropdown>
         <el-avatar :size="40" :src="circleUrl" />
         <template #dropdown>
           <el-dropdown-menu>
             <el-dropdown-item>{{ user.username }}</el-dropdown-item>
             <el-dropdown-item @click="handleExit">退出</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
     </div>
   </el-header>
</template>

<script setup>
import {useUserStore} from '@/store/useUserStore'
import {useRouter} from "vue-router";
import {useRouterStore} from '@/store/useRouterStore'


const circleUrl = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
const {changeUser,user} = useUserStore()
const router = useRouter()
const {changeRouter} = useRouterStore()
const handleExit = ()=>{

  changeUser({})
  changeRouter(false)
  //跳转到登录界面
  router.push("/login")
}

</script>

<style lang="scss" scoped>
.el-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: cornflowerblue;
}
</style>